<template>
  <div style="margin-top: 10px">
    <a-table
        :columns="columns"
        :data-source="page.list"
        :pagination="pagination"
        @change="handleTableChange"
    >
      <template #visit_id="{ text }">
        <span>
          {{ text }}
        </span>
      </template>
      <template #user_name="{ text }">
        <span>
          <smile-outlined/>
          {{ text }}
        </span>
      </template>
      <template #day="{ text }">
        <span>
          {{ text }}
        </span>
      </template>
      <template #start_time="{ text }">
        <span>
          <history-outlined/>
          {{ text }}
        </span>
      </template>
      <template #end_time="{ text }">
        <span>
          <history-outlined/>
          {{ text }}
        </span>
      </template>

      <template #place_name="{ text }">
        <span>
          {{ text }}
        </span>
      </template>
      <template #count="{ text }">
        <span> 第{{ text }}次咨询 </span>
      </template>
      <template #state="{ text }">
        <span v-if="text == 1"> 待咨询 </span>
        <span v-if="text == 2"> 下条咨询 </span>
        <span v-if="text == 3"> 咨询正常 </span>
        <span v-if="text == 4" style="color:orange"> 结案 </span>
        <span v-if="text == 5" style="color:red"> 旷约 </span>
        <span v-if="text == 6"> 请假 </span>
        <span v-if="text == 7"> 脱落 </span>
        <span v-if="text == 0"> 已结案 </span>
      </template>
    </a-table>
  </div>

  <a-modal v-model:visible="visible1" title="登记结果" @ok="finishVisitRecord">
    <a-form-item label="请选择初访结论类型">
      <a-select
          ref="select"
          v-model:value="finishVisitData.type"
          style="width: 120px"
      >
        <a-select-option value="health"
        ><span style="color: green">无需咨询</span></a-select-option
        >
        <a-select-option value="needConsult"
        ><span>安排咨询</span></a-select-option
        >
        <a-select-option value="needDoctor"
        ><span style="color: red">转接送诊</span></a-select-option
        >
      </a-select>
    </a-form-item>

    <a-form-item label="请选择结束时间">
      <a-date-picker v-model:value="finishVisitData.endtime"/>
    </a-form-item>

    <a-form-item label="结论简述">
      <a-textarea v-model:value="finishVisitData.result"/>
    </a-form-item>
  </a-modal>

  <a-modal v-model:visible="ItemVisible" title="详细情况" @ok="closeCard">
    <a-card title="学生情况" style="width: 450px">
      <span label="初访结果类型" v-if="ItemData.type === 'needConsult'"
      >初访结果类型: 安排咨询 <br
      /></span>
      <span
          label="初访结果类型"
          v-if="ItemData.type === 'needDoctor'"
          style="color: red"
      >初访结果类型: 转接送诊 <br
      /></span>
      <span label="初访结果类型" v-if="ItemData.type === 'healthy'"
      >初访结果类型: 无需咨询 <br
      /></span>
      <span label="结束时间"> 结束时间: {{ ItemData.endtime }} <br/></span>
      <span label="初访结果"> 初访结果 :{{ ItemData.result }} <br/></span>
    </a-card>
  </a-modal>
</template>

<script setup>
////////////////////////////////////////////
import {reactive, ref} from "vue";
import {post, setLocalToken} from "@/common";
import {useRouter} from "vue-router";
import {get} from "@/common";
import {message} from "ant-design-vue";
//import {DownloadOutlined} from "";
////////////////////////////////////////////

const columns = [
  {
    dataIndex: "visit_id", //
    title: "初访ID",
    slots: {
      customRender: "visit_id",
    },
  },
  {
    dataIndex: "user_name", //
    title: "咨询师姓名",
    slots: {
      customRender: "user_name",
    },
  },
  {
    dataIndex: "day", //
    title: "日期",
    slots: {
      customRender: "day",
    },
  },
  {
    dataIndex: "start_time", //
    title: "开始时间",
    slots: {
      customRender: "start_time",
    },
  },
  {
    dataIndex: "end_time", //
    title: "结束时间",
    slots: {
      customRender: "end_time",
    },
  },
  {
    dataIndex: "place_name", //
    title: "地点名称",
    slots: {
      customRender: "place_name",
    },
  },
  {
    dataIndex: "count", //
    title: "次数",
    slots: {
      customRender: "count",
    },
  },
  {
    dataIndex: "state", //
    title: "状态",
    slots: {
      customRender: "state",
    },
  },
];

const user = reactive({
  user_id: "",
});

const page = ref({});


const postBody = reactive({
  user_id: "",
});
///////////////////////////////////////////
const pagination = reactive({
  current: 1, //当前页
  pageSize: 5, //每页记录数
  total: 0, //总记录数
  pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
        "共" +
        total +
        "条记录,当前第" +
        pagination.current +
        "页" +
        (range[1] - range[0] + 1) +
        "条记录"
    );
  },
});

const getPage = (pageNum = 1) => {
  user.pageNum = pageNum;
  user.pageSize = pagination.pageSize;

  user.user_id = localStorage.getItem("user_id");

  post("/student/studentConsultRecord/getConsultRecord", user).then((res) => {
    page.value = res.data; //将服务端传来的分页数据赋值予page

    //更新分页引擎
    pagination.current = page.value.current;
    pagination.pageSize = page.value.pageSize;
    pagination.total = page.value.total;

    console.log(res.data.list);
  });
};

getPage(1);

const handleTableChange = (pagi, filters, sorter, {currentDataSource}) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;
  pagination.total = pagi.total;

  getPage(pagination.current);
};

////////////////////////////////////////////
</script>

<style>
</style>
